import React from 'react';
import { Input, InputNumber } from 'antd';

const IntegrationArticle = (props) => (
  <div>
    {
      props.articleCheckedList.indexOf('Read time') !== -1 ?
      <div className="integration-article">
        <div className="integration-articl-item">
          <span className="mr10">Stay on page between</span>
          <span className="mr10">
            <Input
              className="w80"
              addonAfter={<span>Sec</span>}
              value={props.firstArticleFrom}
              onChange={props.firstArticleFromOnChange} />
          </span>
          <span className="mr10">to</span>
          <span className="mr10">
            <Input
              className="w80"
              addonAfter={<span>Sec</span>}
              value={props.secondArticleFrom}
              onChange={props.secondArticleFromOnChange} />
          </span>
          <span className="mr10">Could obtain</span>
          <span>
            <InputNumber
              className="w132"
              placeholder="Integral"
              precision={0}
              min={0}
              max={100}
              value={props.firstArticleIntegral}
              onChange={props.firstArticleIntegralOnChange} />
          </span>
        </div>
        <div className="integration-articl-item">
          <span className="mr10">Stay on page between</span>
          <span className="mr10">
            <Input
              className="w80"
              addonAfter={<span>Sec</span>}
              value={props.secondArticleFrom}
              onChange={props.secondArticleFromOnChange} />
          </span>
          <span className="mr10">to</span>
          <span className="mr10">
            <Input
              className="w80"
              addonAfter={<span>Sec</span>}
              value={props.secondArticleTo}
              onChange={props.secondArticleToOnChange} />
          </span>
          <span className="mr10">Could obtain</span>
          <span>
            <InputNumber
              className="w132"
              placeholder="Integral"
              precision={0}
              min={0}
              max={100}
              value={props.secondArticleIntegral}
              onChange={props.secondArticleIntegralOnChange} />
          </span>
        </div>
        <div className="integration-articl-item">
          <span className="mr10">Stay on page between</span>
          <span className="mr10">
            <Input
              className="w80"
              addonAfter={<span>Min</span>}
              value={props.thirdArticleFrom/60}
              onChange={props.thirdArticleFromOnChange} />
          </span>
          <span className="mr10">Could obtain</span>
          <span>
            <InputNumber
              className="w132"
              placeholder="Integral"
              precision={0}
              min={0}
              max={100}
              value={props.thirdArticleIntegral}
              onChange={props.thirdArticleIntegralOnChange}  />
          </span>
        </div>
      </div>
      :
      null
    }
  </div>
)

export default IntegrationArticle;
